<template>
  <div id="LiveDetails">
    <div class="vip_pay_box" v-if="!vipRootObj[88][185].owner">
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip
          routerName="FansPortrait"
          :lowestVipNum="vipRootObj[88][185].ownerMinLevel"
        />
      </div>
    </div>
    <template v-else>
      <div class="top">
        <radio_group01
          :radio_values="['近7天', '30天', '90天']"
          v-model="KindName"
          class="tab01"
        />
        <div class="optionsBox">
          <el-date-picker
            class="long_time"
            v-model="liveTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickeroptions"
            value-format="yyyy-MM-dd"
            @change="onPick1"
          ></el-date-picker>
        </div>
      </div>
      <div class="header">
        <div class="line"></div>
        <span>达人列表</span>
      </div>
      <dl>
        <dt>达人行业</dt>
        <dd
          ref="ovBox"
          :class="[{ overstep: isOverstep }, { is_unfold: isUnfold }]"
        >
          <div class="cg_items" ref="ovChild">
            <span
              v-for="(item, idx) in categoryList"
              :key="idx + 'cdi'"
              :class="{ active: item.name == isActive }"
              @click="getCondition(item)"
              >{{ item.name }}</span
            >
            <i v-if="categoryList.length" @click="unfoldFn">{{ isUnfold ? "收起" : "展开" }}</i>
          </div>
        </dd>
      </dl>
      <dl>
        <dt>粉丝数量</dt>
        <dd ref="ovBox">
          <div class="cg_items">
            <span
              v-for="(item, idx) in fansList"
              :key="idx + 'cdi'"
              :class="{ active: item.name == fans }"
              @click="getFans(item)"
              >{{ item.name }}</span
            >
          </div>
        </dd>
      </dl>
      <div class="searchBox">
        <div>
          <el-input
            v-model="keyWords"
            placeholder="请输入达人名称关键词搜索"
            @keyup.enter.native="inputSearch"
          ></el-input>
          <div class="imgBox" @click="inputSearch"></div>
        </div>
        <p>（注：以下列表内容仅计算与该品牌商品相关的数据）</p>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th>达人</th>
            <th>行业</th>

            <th @click="sort_fun(true, 0)" v-if="order_by == '0' && sort == 0">
              口碑分
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(false, 0)">
              口碑分
              <img
                src="@/assets/meng/up_down.png"
                v-if="order_by == '1' && sort == 0"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th @click="sort_fun(true, 1)" v-if="order_by == '0' && sort == 1">
              粉丝数
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(false, 1)">
              粉丝数
              <img
                src="@/assets/meng/up_down.png"
                v-if="order_by == '1' && sort == 1"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th @click="sort_fun(true, 2)" v-if="order_by == '0' && sort == 2">
              关联视频
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(false, 2)">
              关联视频
              <img
                src="@/assets/meng/up_down.png"
                v-if="order_by == '1' && sort == 2"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th @click="sort_fun(true, 3)" v-if="order_by == '0' && sort == 3">
              关联直播
              <img src="@/assets/meng/down_up.png" />
            </th>
            <th v-else @click="sort_fun(false, 3)">
              关联直播
              <img
                src="@/assets/meng/up_down.png"
                v-if="order_by == '1' && sort == 3"
              />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
          </tr>
        </thead>
        <tbody v-if="LiveDetailsList.length != 0 && !loading">
          <tr v-for="(item, index) in LiveDetailsList" :key="index">
            <td>
              <div class="talent_box">
                <div class="left_img" @click="talentdetails(item.authorId)">
                  <img :src="item.logo" alt v-errorImg:talent />
                </div>
                <div class="right_box" @click="talentdetails(item.authorId)">
                  {{ item.nickName }}
                </div>
              </div>
            </td>
            <td>{{ item.category }}</td>
            <td>{{ item.publicPraise }}</td>
            <td>{{ format_num(item.totalFans) }}</td>
            <td>{{ format_num(item.relAwemeCount) }}</td>
            <td>{{ format_num(item.relLiveCount) }}</td>
          </tr>
        </tbody>
      </table>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <div class="pageBox" v-if="LiveDetailsList.length != 0 && !loading">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="50"
          :current-page="page"
          @current-change="toSearch"
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
      <div class="empty addTop" v-if="LiveDetailsList.length == 0 && !loading">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
    </template>
  </div>
</template>

<script>
import radioGroupWithNum from "@/component/radioGroupWithNum.vue";
export default {
  props: {},
  data() {
    return {
      KindName: "30天",
      liveTime: [],
      // 选择时间 不可选的日期
      pickeroptions: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 90 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        },
      },
      endTime: "",
      startTime: "",
      category: "-1",
      fansScope: "全部",
      fans: "全部",
      categoryList: [],
      // fansList: [],
      fansList: [
        { name: "全部" },
        { name: "<1w" },
        { name: "1w-10w " },
        { name: "10w-50w" },
        { name: "50w-100w" },
        { name: "100w-500w" },
        { name: "500w-1000w" },
        { name: ">1000w" },
      ],
      keyWords: "",
      loading: false,
      count: 0,
      page: 1,
      LiveDetailsList: [],
      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      isActive: "全部",
      order_by: 0,
      sort: 1,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
    };
  },
  components: { radioGroupWithNum },
  computed: {},
  watch: {
    KindName: function (newVal, oldVal) {
      this.KindName = newVal;
      this.getTime();
      this.page = 1;
      this.LiveDetailsList = [];
      this.getKing();
      this.toSearch();
    },
    keyWords(newVal, oldVal) {
      if (newVal == "") {
        this.getTime();
        this.page = 1;
        this.LiveDetailsList = [];
        this.toSearch();
      }
    },
  },
  created() {
    if (this.vipRootObj[88][185].owner) {
      this.getTime();
      this.getKing();
      this.toSearch();
    }
  },
  mounted() {},
  methods: {
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.order_by = "1";
      } else {
        this.order_by = "0";
      }
      this.sort = parm02;
      this.getTime();
      this.page = 1;
      this.LiveDetailsList = [];
      this.toSearch();
    },
    getCondition(itemObj) {
      // 点击达人行业选项
      this.isActive = itemObj.name;
      this.categoryList.map((item, index) => {
        if (item.name == itemObj.name) {
          this.category = itemObj.value;
        }
      });
      this.getTime();
      this.page = 1;
      this.LiveDetailsList = [];
      this.toSearch();
    },
    getFans(item) {
      this.fans = item.name;
      console.log(item.name);
      switch (item.name) {
        case "全部":
          this.fansScope = "全部";
          break;
        case "<1w":
          this.fansScope = "0-10000";
          break;
        case "1w-10w ":
          this.fansScope = "10000-100000";
          break;
        case "10w-50w":
          this.fansScope = "100000-500000";
          break;
        case "50w-100w":
          this.fansScope = "500000-1000000";
          break;
        case "100w-500w":
          this.fansScope = "1000000-5000000";
          break;
        case "500w-1000w":
          this.fansScope = "5000000-10000000";
          break;
        case ">1000w":
          this.fansScope = "10000000-1000000000";
          break;
        default:
          break;
      }
      this.page = 1;
      this.LiveDetailsList = [];
      this.getTime();
      this.toSearch();
    },
    unfoldFn() {
      this.isUnfold = !this.isUnfold;
    },
    setCondition() {
      this.$nextTick(() => {
        let box = this.$refs.ovBox;
        if (!box) return;
        let childBox = this.$refs.ovChild;
        let boxHeight = box.offsetHeight;
        let childBoxHeight = childBox.offsetHeight;
        if (boxHeight < childBoxHeight) {
          this.isOverstep = true;
          console.log(this.isOverstep);
        }
      });
    },
    getTime() {
      switch (this.KindName) {
        case "近7天":
          this.endTime = this.timestamp(Date.now() / 1000 - 1 * 86400, "Y-M-D");
          this.startTime = this.timestamp(
            Date.now() / 1000 - 86400 * 7,
            "Y-M-D"
          );
          break;
        case "30天":
          this.endTime = this.timestamp(Date.now() / 1000 - 1 * 86400, "Y-M-D");
          this.startTime = this.timestamp(
            Date.now() / 1000 - 86400 * 30,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endTime = this.timestamp(Date.now() / 1000 - 1 * 86400, "Y-M-D");
          this.startTime = this.timestamp(
            Date.now() / 1000 - 86400 * 90,
            "Y-M-D"
          );
          break;
        default:
          this.startTime = this.liveTime[0];
          this.endTime = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startTime, this.endTime];
    },
    onPick1() {
      if (this.KindName == "") {
        this.page = 1;
        this.LiveDetailsList = [];
        this.getTime();
        this.getKing();
        this.toSearch();
      } else {
        this.KindName = "";
      }
    },
    inputSearch() {
      this.page = 1;
      this.LiveDetailsList = [];
      this.getTime();
      this.toSearch();
    },
    toSearch(i) {
      this.loading = true;
      if (i) {
        this.page = i;
        this.backTop();
      }
      this.$axios
        .post("/api/Brand/BrandRelAuthor", {
          brandId: this.$route.query.id,
          startDate: this.startTime,
          endDate: this.endTime,
          CategoryId: this.category,
          Fans: this.fansScope,
          page: this.page,
          size: 30,
          order_by: this.order_by,
          sort: this.sort,
          keyword: this.keyWords,
        })
        .then((res) => {
          this.loading = false;
          if (res.data.code == 0) {
            this.LiveDetailsList = res.data.data;
            this.count = res.data.count;
          } else {
            this.LiveDetailsList = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getKing() {
      // this.fansList = [];
      // this.categoryList = [];
      this.$axios
        .get("/api/Brand/GetFansCategoryAnalyse", {
          params: {
            brandId: this.$route.query.id,
            startDate: this.startTime,
            endDate: this.endTime,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.categoryList = res.data.data.category;
            this.setCondition();
            // let list = res.data.data.fans;
            // list.forEach((e) => {
            //   if (e.value == -1) {
            //     e.name = "全部";
            //   } else if (e.value == 1) {
            //     e.name = "<1w";
            //   } else if (e.value == 2) {
            //     e.name = "1w-10w";
            //   } else if (e.value == 3) {
            //     e.name = "10w-50w";
            //   } else if (e.value == 4) {
            //     e.name = "50w-100w";
            //   } else if (e.value == 5) {
            //     e.name = "100w-500w";
            //   } else if (e.value == 6) {
            //     e.name = "500w-1000w";
            //   }
            //   this.fansList.push(e);
            // });
          }
        });
    },
    talentdetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style scoped lang="less">
#LiveDetails {
  height: 83vh;
  overflow: auto;
  background-color: #fff;
  border-radius: 6px;
  padding: 20px 20px 0 20px;
  .top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    .tab01 {
      margin-right: 20px;
    }
  }
  .header {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #222222;
    margin-bottom: 23px;
    .line {
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
    }
  }
  .searchBox {
    justify-content: inherit;
    width: auto;
    background-color: #ffffff;
    // 搜索框
    .imgBox {
      background: url("../../../assets/wang/talentCompare/search-nohover.png")
          no-repeat 10px 7px,
        #fff !important;
      background-size: 15px 15px !important;
      border: 1px solid #e5e5e5;
      border-left: 0;
    }
    > div {
      width: 308px;
      display: flex;
    }
    p {
      margin-left: 15px;
      font-size: 14px;
      font-weight: normal;
      color: #888888;
    }
  }
  .table {
    thead {
      th:nth-child(1) {
        text-align: left;
        padding-left: 45px;
      }
      th:nth-child(2),
      th:nth-child(3),
      th:nth-child(4),
      th:nth-child(5),
      th:nth-child(6) {
        width: 20%;
        cursor: pointer;
      }
      th:nth-child(2) {
        cursor: auto;
      }
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
    }
    tbody {
      tr {
        height: 78px;
        td {
          text-align: center;
          font-size: 14px;
          color: #222222;
          .talent_box {
            display: flex;
            align-items: center;
            .left_img {
              width: 50px;
              height: 50px;
              margin-right: 10px;
              cursor: pointer;
              img {
                border-radius: 50%;
                width: 100%;
                height: 100%;
              }
            }
            .right_box {
              font-size: 14px;
              font-weight: 600;
              color: #222222;
              cursor: pointer;
              width: 200px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .right_box:hover {
              color: #ff924b;
            }
          }
        }
        td:nth-child(1) {
          text-align: left;
          padding-left: 35px;
        }
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
        }
      }
    }
  }
  dl {
    display: flex;
    font-size: 14px;
    margin-bottom: 6px;
    &:last-child {
      margin-bottom: 0;
    }
    dt {
      padding-top: 6px;
      width: 78px;
      flex-shrink: 0;
      color: #888;
    }
    dd {
      position: relative;
      color: #555;
      height: 32px;
      overflow: hidden;
      .cg_items {
        display: inline-block;
        font-size: 0;
        span {
          display: inline-block;
          height: 32px;
          padding: 0 16px;
          // margin-bottom: 5px;
          line-height: 32px;
          font-size: 14px;
          cursor: pointer;
          vertical-align: middle;
          margin-right: 8px;
          &.active {
            color: #fd7f2c;
            background-color: #fff1e8;
            border-radius: 4px;
          }
        }
        span:hover {
          color: #ff924b;
        }
        i {
          position: absolute;
          display: none;
          right: 0;
          top: 6px;
          font-size: 14px;
          font-style: normal;
          color: #fd7f2c;
          cursor: pointer;
        }
      }
      &.overstep {
        padding-right: 22px;
        .cg_items {
          i {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
      &.is_unfold {
        padding-right: 0;
        height: inherit;
        .cg_items {
          i {
            position: inherit;
          }
        }
      }
    }
  }
}
</style>
